<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">活动管理 / 商户拉新</div>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form label-width="80px" :model="form" class="demo-form-inline">
            <el-form-item label="机构ID">
              <el-input
                v-model="form.officeUid"
                placeholder="请输入机构ID"
              ></el-input
            ></el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="form.officeName"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构电话">
              <el-input v-model="form.phone" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="机构类型">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in optionsMemberType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input
                v-model="form.activeName"
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="form.acTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-col class="boxer">
              <el-button @click="reset">重置</el-button>
              <el-button
                style="margin-right:10px"
                type="primary"
                @click="search('form')"
                >搜索</el-button
              >
            </el-col>
          </el-form>
        </div>
        <div class="buttons">
          <el-button type="primary" v-if="isAuth('teamRewardAdd')" @click="bank"
            >添加活动</el-button
          >
        </div>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @select="onRowClick"
        >
          <el-table-column type="selection" min-width="70"></el-table-column>
          <el-table-column
            prop="officeUid"
            label="机构ID"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="officeName"
            label="机构名称"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="activeName"
            label="活动名称"
            min-width="100"
          ></el-table-column>
          <el-table-column
            prop="channelName"
            label="品牌"
            min-width="50"
          ></el-table-column>
          <el-table-column prop="endDate" label="有效期" min-width="150">
            <template slot-scope="scope">
              <div>
                {{ scope.row.startDate }}
                <br />
                -
                <br />
                {{ scope.row.endDate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createDate"
            label="创建时间"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="rewardDate"
            label="奖励发放时间"
            min-width="100"
          ></el-table-column>
          <el-table-column prop="status" label="状态" min-width="80">
            <template slot-scope="scope">
              <div>
                {{ isDuringDate(scope.row) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="280">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              &nbsp;
              <el-button
                v-if="isAuth('teamRewardUpdate')"
                @click="teamMerchants(scope.row)"
                size="small"
                type="text"
                >编辑</el-button
              >&nbsp;
              <el-button
                v-if="isAuth('teamRewardDetails')"
                @click="teamMerchant(scope.row)"
                size="small"
                type="text"
                >详情</el-button
              >
              &nbsp;
              <span
                @click="changeStatus(scope.row.activeUid, scope.row.status)"
              >
                <el-button
                  v-if="scope.row.status == 0 && isAuth('teamRewardStop')"
                  size="small"
                  type="text"
                  style="color:#F56C6C"
                  >停用</el-button
                >
                <el-button
                  v-if="scope.row.status != 0 && isAuth('teamRewardStop')"
                  size="small"
                  type="text"
                  >启用</el-button
                >
              </span>
              &nbsp;
              <!-- <el-button size="mini" type="primary">下载</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="btn" style="margin-top: 20px;">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
          <!-- <el-button @click="toggleSelection()">取消选择</el-button> -->
          <!-- <el-button style="float:left" @click="quan">全选</el-button> -->
          <div
            class="filter-container"
            style="float: left; text-align: left; font-size: 13px; color: rgb(31, 165, 243); cursor: pointer;margin-left: 10px;
    margin-top: 10px; width: auto"
          >
            <el-checkbox v-model="checkedAll" @change="quan">全选</el-checkbox>
          </div>
          <!-- <div class="exports">批量导出</div> -->
          <el-pagination
            background
            style="text-align: right;"
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-size="form.number"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        oemUid: localStorage.getItem("uid"),
        officeUid: "", // 机构ID
        officeName: "", //机构名称
        phone: "", //电话
        type: "0", //机构类型
        activeName: "", //活动名称
        acState: "", //活动状态
        acTime: "", //活动时间
        status: "",
        page: 1,
        number: 20,
        startDate: "", //活动开始时间
        endDate: "" //活动结束时间
      },
      page: 1,
      number: 10,
      total: null,
      totalNum: 0,
      checkedAll: false,
      // 机构类型
      optionsMemberType: [
        {
          value: "0",
          label: "OEM"
        },
        {
          value: "1",
          label: "小oem"
        },
        {
          value: "2",
          label: "贴牌"
        }
      ],
      memberType: "",
      //   机构类型结束‘
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "正常"
        },
        {
          value: "1",
          label: "停用"
        }
      ],
      value: "",
      //  日期选怎开始
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      // 日期选择结束
      tableData: []
    };
  },
  created() {
    this.getList();
    // axios
    //   .post("/api/active/queryMemExtendActiveList", {})
    //   .then((res) => {
    //     console.log(res);
    //     if(res.data.data.length!=0){
    //       // this.dataes = res.data.data.officeUid;
    //     }

    //     // console.log(JSON.stringify(this.dataes));
    //     // console.log(this.dataes);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  },
  methods: {
    //切换停用启用状态
    changeStatus(uid, status) {
      console.log(uid, status);
      if (status == 1) status = 0;
      else status = 1;
      axios
        .post("/api/active/changeActiveStatus", { uid: uid, status: status })
        .then(res => {
          console.log(res);
          this.getList();
        })
        .catch(err => {
          console.login_img(err);
        });
    },
    //判读时间区间
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
        beginDate = new Date(beginDateStr.startDate),
        endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
        return "进行中";
      } else if (curDate < beginDate) {
        return "未开始";
      } else if (curDate > endDate) {
        return "已结束";
      }
    },

    //获取活动列表
    getList() {
      console.log(this.form);
      axios
        .post("/api/active/queryMemExtendActiveList", this.form)
        .then(res => {
          console.log("列表成功");
          console.log(res);
          this.total = res.data.total;
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
          alert("失败");
        });
    },
    //页面切换
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList();
    },

    handleClick(row) {
      console.log(row);
    },
    quan() {
      if (this.checkedAll) {
        this.tableData.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //上一页
    prev(val) {
      // console.log(val);
      this.form.page = val;
    },
    //下一页
    next(val) {
      // console.log(val);
      this.form.page = val;
    },
    qiehuan(val) {
      // console.log("ASdfas")
      this.form.page = val;
      // console.log(val);
    },
    onRowClick(val) {
      console.log("选中打印");
      console.log(val);
    },
    // 重置
    reset() {
      this.form.officeUid = "";
      this.form.officeName = ""; //机构名称
      this.form.phone = ""; //电话
      this.form.type = "0"; //机构类型
      this.form.activeName = ""; //活动名称
      this.form.acState = ""; //活动状态
      this.form.acTime = ""; //活动时间
      this.form.status = "";
      this.form.page = 1;
      this.form.number = 10;
      this.form.startDate = ""; //活动开始时间
      this.form.endDate = ""; //活动结束时间
    },
    search() {
      console.log(this.form);
      this.form.startDate = this.form.acTime[0];
      this.form.endDate = this.form.acTime[1];
      this.form.page = 1;
      this.getList();
      // axios
      //   .post("/api/active/promotionActiveList", this.form)
      //   .then((res) => {
      //     console.log("成了");
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    bank() {
      this.$router.push({
        path: "teamRewardfrind",
        name: "teamRewardfrind",
        query: {
          type: "3"
        }
      });
    },
    teamMerchants(val) {
      this.$router.push({
        path: "teamRewardfrind",
        name: "teamRewardfrind",
        query: {
          activeUid: val.activeUid,
          type: "2",
          diss: "z",
          uid: val.activeUid
        }
      });
    },
    teamMerchant(val) {
      console.log(val);
      this.$router.push({
        path: "teamRewardfrind",
        name: "teamRewardfrind",
        query: {
          activeUid: val.activeUid,
          dis: "y",
          uid: val.activeUid
        }
      });
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /* margin-left: 2%; */
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.searchTitle {
  display: flex;
  flex-wrap: wrap;
  background: #f9fafc;
  padding-top: 20px;
  padding-bottom: 20px;
}
.list {
  display: flex;
  align-items: center;
  width: 450px;
}
.list > div:first-of-type {
  width: 90px;
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: right; */
  text-align: right;
  margin-right: 15px;
}
.exports {
  color: #409eff;
  margin-left: 20px;
}
.btn {
  align-items: center;
}
.info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 50px;
}
.line {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  border-bottom: 1px solid #ebeef5;
}
.textTitle {
  font-size: 18px;
  color: #2f2c29;
  border-bottom: 2px solid #606266;
}
.btnGroup {
  float: right;
}
.name {
  text-align: right;
}
.boxer {
  padding-right: 20px;
  float: right;
}
.boxer > .el-button {
  width: 100px;
  float: right;
}
</style>
